/**
 * Created by Lcs on 2017/5/19.
 */
import React from "react";
import {
  StyleSheet, Text, TouchableOpacity, Image,
} from "react-native";
import PropTypes from "prop-types";

import { Color, ScreenHeight, FontSize } from "../../common/index";
import Button from "./NCButton";

const ErrorView = props => {
  const {
    status, title, btnText, textStyle, buttonStyle, onButtonPress, onPress, style,
  } = props;
  const isPermissionDenied = status === "permission_denied";
  const hasTx = title && title !== "";
  const hasBtn = btnText && btnText !== "";
  const textView = hasTx || isPermissionDenied ? (
    <Text style={[styles.text_desc, textStyle]}>
      {isPermissionDenied ? "您未参与当前项目，无法查看相关信息" : title}
    </Text>
  ) : null;

  const button = hasBtn ? (
    <Button
      buttonStyle={[styles.btnContainer, buttonStyle]}
      onPress={onButtonPress}
      title={btnText}
      textStyle={styles.btn_text_style}
    />
  ) : null;

  return (
    <TouchableOpacity
      onPress={onPress}
      activeOpacity={0.8}
      style={[styles.container, style]}
      disabled={isPermissionDenied}
    >
      <Image source={require("../../img/img_network_error.png")} />
      {textView}
      {button}
    </TouchableOpacity>
  );
};

ErrorView.propTypes = {
  onPress: PropTypes.func,
  onButtonPress: PropTypes.func,
  title: PropTypes.string,
  btnText: PropTypes.string,
  status: PropTypes.oneOf(["net_error", "permission_denied"]),
  textStyle: PropTypes.any,
  buttonStyle: PropTypes.any,
};

ErrorView.defaultProps = {
  btnText: "",
  status: "net_error",
  title: "您的信号飞到了外星球",
  textStyle: {},
  buttonStyle: {},
  onPress: () => {},
  onButtonPress: () => {},
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: ScreenHeight / 8,
    alignItems: "center",
    backgroundColor: Color.background,
  },
  text_desc: {
    fontSize: FontSize.SIZE_15,
    color: Color.text_assist,
    marginVertical: 30,
  },
  btnContainer: {
    height: 28,
    width: 80,
    borderRadius: 14,
    borderWidth: 0,
    marginTop: 20,
    backgroundColor: Color.colorPrimary,
  },
  btn_text_style: {
    fontSize: FontSize.SIZE_15,
    color: Color.white,
  },
});
export default ErrorView;
